<template>
	<view class="my-box">
		<!-- 导航栏左侧插槽 -->
		<!-- <uni-nav-bar background-color="#fff" color="#000" :status-bar="true" title="我的供求" fixed>
			
			<view slot="left">
				<view class="navWp">
					<view class="back" @click="goBack">
						<u-icon name="arrow-left" color="#000000" size="50"></u-icon>
					</view>
				</view>
			</view>
		</uni-nav-bar> -->
		<!-- 顶部tab切换 -->
		<!-- <view class="tab-box">
			<view :class="tabClickIndex==index?'tab-wrap tab-active':'tab-wrap tab-unactive'"
				v-for="(item,index) in tabList" :key="index" @click="tabClick(item,index)">
				<view :class="tabClickIndex==index?'tab-cicle tab-acticve-cicle':'tab-cicle tab-unacticve-cicle'">
					<img :src="item.imgUrl" alt="">
				</view>
				<text>{{item.name}}</text>
			</view>
		</view> -->
		<view class="">
			<u-tabs :list="marketMenuLists"   @click="marketMenuClick"></u-tabs>
		</view>
		<view class="">
			<myBuyPage v-if="myBuyShow" ></myBuyPage>
			<mySupplyPage v-if="mySupplyShow" ></mySupplyPage>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import myBuyPage from '@/pagesBusiness/mySupPur/myBuy.vue'
	import mySupplyPage from '@/pagesBusiness/mySupPur/mySupply.vue'
	export default {
		components: {
			myBuyPage,
			mySupplyPage
		},
		data() {
			return {
				tabList: [{
						imgUrl: 'https://file.casugn.com/storecompcard//66vsljx46V4wc11af23db02e61d63d69974c18e9efba_1658388892934.png',
						name: '活动'
					},
					{
						imgUrl: 'https://file.casugn.com/storecompcard//nhJ5ffGc2zhs60d80f016055f57051d38ff74b8a4e0b_1660098959213.png',
						name: '供求市场'
					},
					{
						imgUrl: 'https://file.casugn.com/storecompcard//CLGdd9HTBntg8bed5fe978d2b4cf096091636771c17b_1658388882147.png',
						name: '我的'
					},
				],
				tabClickIndex: 2, //tab选中的index值
				marketMenuLists: [{
					name: '我的采购',
					id: 0,
				}, {
					name: '我的供应商',
					id: 1,
				}],
				typeValue1: 1, //0-找采购 1-找供应
				defaluteStatus:1,
				myBuyShow:true,
				mySupplyShow:false,
				
				myBuyArr:[],//我的采购列表
				
				mySupplyArr:[],//我的供应列表
				
				
				total:0,
				pageNo:1,
				pageSize:10,
				openId:'',
				name:'',
			};
		},
		mounted(){
			let openId = uni.getStorageSync('openId')
			console.log("openId", openId)
			this.openId=openId.openid
			this.myBuyArr=[]
			this.mySupplyArr=[]
			
			
			let a=uni.getStorageSync(`historyJumpTo`)
			if(a){
				if(a==1){
					let data= {
						name: '我的采购',
						id: 0,
					}
					this.marketMenuClick(data)
				}else{
					let data= {
						name: '我的供应商',
						id: 1,
					}
					this.marketMenuClick(data)
				}
			}else{
				this.queryList()
			}
			
		},
		onShow() {
			let openId = uni.getStorageSync('openId')
			console.log("openId", openId)
			this.openId=openId.openid
			this.myBuyArr=[]
			this.mySupplyArr=[]
			
			
			let a=uni.getStorageSync(`historyJumpTo`)
			if(a){
				if(a==1){
					let data= {
						name: '我的采购',
						id: 0,
					}
					this.marketMenuClick(data)
				}else{
					let data= {
						name: '我的供应商',
						id: 1,
					}
					this.marketMenuClick(data)
				}
			}else{
				let data= {
					name: '我的采购',
					id: 0,
				}
				this.marketMenuClick(data)
			}
			
		},
		
		onReachBottom() {
			// console.log(1)
			if(this.typeValue1==0){
				console.log("我的采购")
				if (this.pageNo * 10 > this.total) {
					uni.showToast({
						title: '没有更多数据',
						icon: 'none'
					})
				}
				this.pageNo++
				// this.queryList()
				
			}else{
				console.log("我的供应")
				if (this.pageNo * 10 > this.total) {
					uni.showToast({
						title: '没有更多数据',
						icon: 'none'
					})
				}
				this.pageNo++
				// this.querySupplyList()
			}
			
		},
		methods:{
			// 点击导航栏左侧
			goBack() {
				uni.switchTab({
					url: '/pages/user/user'
				})
			},
			// 我的采购列表数据
			queryList(){
				this.$api.queryMyCouponLists(this.name,this.openId,this.pageNo,this.pageSize).then(res => {
					console.log(res)
					
					if (res.success) {
						this.myBuyArr = [...this.myBuyArr, ...res.result.records]
						this.total = res.result.total
						// this.$store.commit('setMyBuyInfo', data)
					}
				})
			},
			// 删除
			deleteReset(val){
				// 我的采购删除
				console.log("我的采购删除")
				console.log(val)
				this.myBuyArr=[]
				this.total = 0
				this.pageNo=1
				this.queryList()
			},
			// 我的供应商列表数据
			querySupplyList(){
				this.$api.queryMySupplyListsByOpenId(this.name,this.openId,this.pageNo,this.pageSize).then(res => {
					console.log(res)
					
					if (res.success) {
						this.mySupplyArr =[...this.mySupplyArr, ...res.result.records]
						this.total = res.result.total
					}
				})
			},
			
			// 状态切换点击
			marketMenuClick(item) {
				console.log(item)
				this.typeValue1 = item.id
				if(this.typeValue1==0){
					this.myBuyShow=true
					this.mySupplyShow=false
					this.myBuyArr=[]
					this.total = 0
					this.pageNo=1
					// this.queryList()
				}else{
					this.myBuyShow=false
					this.mySupplyShow=true
					this.mySupplyArr=[]
					this.total = 0
					this.pageNo=1
					// this.querySupplyList()
				}
				this.defaluteStatus = item.id
			},
			// tab切换点击事件
			tabClick(item, index) {
				console.log(index)
				console.log(item)
				this.tabClickIndex = index
				if (index == 1) {
					this.tabList.forEach(item => {
						item.imgUrl =
							'https://file.casugn.com/storecompcard//nhJ5ffGc2zhs60d80f016055f57051d38ff74b8a4e0b_1660098959213.png'
					})
					this.tabList[1].imgUrl =
						'https://file.casugn.com/storecompcard//WYWMCallue7ueed3b042042bb6067c70420fb8327f23_1660099871888.png'
					uni.setStorageSync(`supplyJumpTo`, 2)
					uni.navigateTo({
						url: '/pagesBusiness/marketPage/marketPage'
					})
				} else if(index == 0){
					this.tabList.forEach(item => {
						item.imgUrl =
							'https://file.casugn.com/storecompcard//66vsljx46V4wc11af23db02e61d63d69974c18e9efba_1658388892934.png'
					})
					this.tabList[0].imgUrl =
						'https://file.casugn.com/storecompcard//CLGdd9HTBntg8bed5fe978d2b4cf096091636771c17b_1658388882147.png'
					
					uni.navigateTo({
						url: '/pagesBusiness/circleList/circleList'
					})
				}else{
					this.tabList.forEach(item => {
						item.imgUrl =
							'https://file.casugn.com/storecompcard//66vsljx46V4wc11af23db02e61d63d69974c18e9efba_1658388892934.png'
					})
					this.tabList[2].imgUrl =
						'https://file.casugn.com/storecompcard//CLGdd9HTBntg8bed5fe978d2b4cf096091636771c17b_1658388882147.png'
				}
				console.log(this.tabClickIndex)
			},
					
		}
	}
</script>

<style lang="scss" scoped>
	.my-box{
		background: #F8F9FF;
		position: absolute;
		width: 100%;
		height: 100%;
		.navWp {
			display: flex;
			align-items: center;
		
			.back {}
		
			.user {
				margin-left: 20upx;
			}
		}
		.tab-box {
			display: flex;
		
			.tab-wrap {
				width: 178upx;
				text-align: center;
				height: 199upx;
				position: relative;
		
				.tab-cicle {
					margin: 0 auto;
					margin-top: 29upx;
					width: 110upx;
					height: 110upx;
					position: relative;
					text-align: center;
					border-radius: 50%;
		
					img {
						width: 40upx;
						height: 40upx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translateX(-20upx) translateY(-20upx);
					}
				}
		
				text {
					margin-top: 11upx;
					font-size: 24upx;
					font-weight: 400;
					color: #000000;
					line-height: 30upx;
				}
			}
		
			.tab-active {
				background: #FFFFFF;
			}
		
			.tab-unactive {
				background: #F8F9FF;
		
				img {
					width: 40upx;
					height: 40upx;
				}
			}
		
			.tab-acticve-cicle {
				background: #413BF3;
			}
		
			.tab-unacticve-cicle {
				background: transparent;
				border: 2upx solid #413BF3;
		
				img {
					width: 20upx;
					height: 20upx;
				}
			}
		}
		
	}
</style>
